<script setup>
import { ref, onMounted } from "vue";
import { usePrintStore } from "@/store/print";
import printJS from "print-js";
import router from "@/router";

const print = usePrintStore();
const formData = ref(print.printData);
const date = new Date();
const dataStr =
  date.getFullYear() +
  "年" +
  (date.getMonth() + 1) +
  "月" +
  date.getDate() +
  "日";
console.log(dataStr);
onMounted(() => {
const focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
  printJS({
    printable: "page",
    type: "html",
    style:
      "@page { size: A4 landscape; margin:0;padding: 0;border:none;}",
    targetStyle: "*",
    targetStyles: "*",
    maxWidth: "1150",
    onBeforePrint: () => {
      console.log("before print");
    },
    onAfterPrint: () => {
      console.log("after print");
      router.push("/detail");
    }, onPrintDialogClose: () => {
      router.push("/select");
      console.log("print dialog closed");
      clearInterval(focuser);
    }
  });
});
</script>

<template>
  <div id="page">
      <div class="bar">
        <table class="maintain-table">
          <tbody>
            <tr style="text-align: center">
              <td colspan="4" class="title">档案材料清单（留存）</td>
            </tr>
            <tr>
              <td>姓名</td>
              <td>{{ formData.name }}</td>
              <td>政治面貌</td>
              <td>{{ formData.politicalStatus }}</td>
            </tr>
            <tr>
              <td>院系</td>
              <td>{{ formData.faculty }}</td>
              <td>学号</td>
              <td>{{ formData.studentNumber }}</td>
            </tr>
            <tr>
              <td>专业</td>
              <td colspan="3">{{ formData.major }}</td>
            </tr>
            <tr>
              <td colspan="4" class="document-content">
                <div
                  v-for="item in formData.archiveMaterials"
                  :key="item.id"
                  style="text-indent: 0.5em"
                >
                  <span v-if="item.materialName.length > 0"
                    >{{ item.qualificationName }}：</span
                  >
                  <span
                    v-if="item.materialName.length > 0"
                    v-for="(i, index) in item.materialName"
                    >{{ i
                    }}{{
                      index === item.materialName.length - 1 ? "" : "，"
                    }}</span
                  >
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="6" class="signature">
                <p>档案号：{{ formData.archiveNumber }}</p>
                <span class="date">{{
                  dataStr
                }}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="line" />
      <div class=" bar">
        <table class="accept-table">
          <tbody>
            <tr style="text-align: center">
              <td colspan="10" class="title">档案材料清单</td>
            </tr>
            <tr>
              <td>姓名</td>
              <td>{{ formData.name }}</td>
              <td>政治面貌</td>
              <td>{{ formData.politicalStatus }}</td>
            </tr>
            <tr>
              <td>院系</td>
              <td>{{ formData.faculty }}</td>
              <td>学号</td>
              <td>{{ formData.studentNumber }}</td>
            </tr>
            <tr>
              <td>专业</td>
              <td colspan="3">{{ formData.major }}</td>
            </tr>
            <tr>
              <td colspan="4" class="document-content">
                <div
                  v-for="item in formData.archiveMaterials"
                  :key="item.id"
                  style="text-indent: 0.5em;line-height: 1.2rem;"
                >
                <div>
                  <span v-if="item.materialName.length > 0"
                    >{{ item.qualificationName }}：</span>
                  <span
                    v-if="item.materialName.length > 0"
                    v-for="(i, index) in item.materialName"
                    >{{ i
                    }}{{
                      index === item.materialName.length - 1 ? "" : "，"
                    }}</span>
                    </div>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="10" class="signature">
                <p>档案号：{{ formData.archiveNumber }}</p>
                <span  class="date" >{{dataStr}}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>
</template>

<style scoped>
@import "@/assets/css/print.css";
#page {
  overflow: auto;
  height: 530px;
  font-size: 10pt;
  font-family: "宋体";
  margin-top: 2rem;
  overflow: visible;
}
.document-content div {
  line-height: 1.2; /* 增加行高防止重叠 */
  margin: 1.1rem 0; /* 增加段落间距 */
  word-wrap: break-word;
  overflow-wrap: anywhere;/* 更智能的断词 */
  text-align: justify; 
  page-break-inside: avoid; /* 防止打印时分页断开 */
}
</style>
